<template>
  <div class="welcome-container">
    <div class="header">
      <h1>欢迎使用火车票售票系统</h1>
      <p>轻松管理您的火车票务，随时查询余票信息，快速管理乘客信息</p>

      <div class="stats">
        <div class="stat-item">
          <div class="number">{{ stats.queries.toLocaleString() }}</div>
          <div class="label">今日查询量</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ stats.sales.toLocaleString() }}</div>
          <div class="label">今日售票量</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ stats.satisfaction }}%</div>
          <div class="label">用户满意度</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ stats.routes }}</div>
          <div class="label">热门线路</div>
        </div>
      </div>
    </div>

    <div class="features">
      <div
          class="feature-card"
          v-for="(feature, index) in features"
          :key="index"
          @mouseenter="hoverCard(index)"
          :style="{ transform: `translateY(${hoverIndex === index ? '-10px' : '0'})` }"
      >
        <div class="feature-icon" :style="{ background: feature.color }">
          <i :class="feature.icon"></i>
        </div>
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
        <button class="btn" @click="navigateTo(feature.route)">
          {{ feature.buttonText }} <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>

    <div class="ticket-preview">
      <h3>最新车票预览</h3>
      <div class="ticket">
        <div class="ticket-header">
          <div class="ticket-number">电子客票号: {{ ticket.ticketNumber }}</div>
          <div class="ticket-status">{{ ticket.status }}</div>
        </div>

        <div class="ticket-body">
          <div class="station">
            <div class="name">{{ ticket.departureStation }}</div>
            <div class="time">{{ ticket.departureTime }} 出发</div>
          </div>

          <div class="journey">
            <div class="train">{{ ticket.trainNumber }}</div>
            <div class="duration">{{ ticket.duration }}</div>
            <div class="route">{{ ticket.route }}</div>
          </div>

          <div class="station">
            <div class="name">{{ ticket.arrivalStation }}</div>
            <div class="time">{{ ticket.arrivalTime }} 到达</div>
          </div>
        </div>

        <div class="ticket-footer">
          <div class="info">
            <span>日期: {{ ticket.date }}</span>
            <span>座位: {{ ticket.seat }}</span>
            <span>乘客: {{ ticket.passenger }}</span>
          </div>
          <div class="qr-code">
            <i class="fas fa-qrcode"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>火车票售票系统 © {{ currentYear }} 版权所有 | 客服热线: 12306 | 服务时间: 24小时</p>
    </div>
  </div>

</template>

<script>
import {defineComponent, ref, reactive, onBeforeUnmount, computed, onMounted} from 'vue';
import { useRouter } from 'vue-router'; // 引入Vue Router
export default defineComponent({
  setup() {
    const router = useRouter(); // 获取路由实例
    // 响应式数据
    const hoverIndex = ref(-1);
    const stats = reactive({
      queries: 12583,
      sales: 3764,
      satisfaction: 98.7,
      routes: 46
    });

    const features = ref([
      {
        title: "乘客管理",
        icon: "fas fa-users",
        description: "添加、编辑和删除常用乘客信息，支持多人同时管理，让购票更高效。",
        buttonText: "管理乘客",
        route: "/passenger",
        color: "linear-gradient(135deg, #ff7e5f, #feb47b)"
      },
      {
        title: "余票查询",
        icon: "fas fa-search",
        description: "实时查询全国火车余票信息，支持按日期、车次、座位类型筛选。",
        buttonText: "查询余票",
        route: "/ticket",
        color: "linear-gradient(135deg, #1a2980, #26d0ce)"
      },
      {
        title: "我的车票",
        icon: "fas fa-ticket-alt",
        description: "查看已购买的车票信息，支持在线改签、退票操作，车票状态实时更新。",
        buttonText: "查看车票",
        route: "/myTicket",
        color: "linear-gradient(135deg, #56ab2f, #a8e063)"
      }
    ]);

    const ticket = reactive({
      ticketNumber: "D20230806G123",
      status: "已出票",
      departureStation: "北京南",
      departureTime: "08:30",
      arrivalStation: "上海虹桥",
      arrivalTime: "10:45",
      trainNumber: "G123",
      duration: "2小时15分钟",
      route: "北京南 → 上海虹桥",
      date: "2023-08-15",
      seat: "06车15F",
      passenger: "张先生"
    });

    // 计算属性
    const currentYear = computed(() => new Date().getFullYear());

    // 方法
    const hoverCard = (index) => {
      hoverIndex.value = index;
    };

// 导航方法 - 更新为使用Vue Router
    const navigateTo = (route) => {
      router.push(route); // 使用Vue Router进行导航
    };

    // 定时器更新统计信息
    let statsInterval;

    onMounted(() => {
      statsInterval = setInterval(() => {
        stats.queries += Math.floor(Math.random() * 20);
        stats.sales += Math.floor(Math.random() * 10);
      }, 5000);
    });

    onBeforeUnmount(() => {
      clearInterval(statsInterval);
    });

    return {
      hoverIndex,
      stats,
      features,
      ticket,
      currentYear,
      hoverCard,
      navigateTo
    };
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.welcome-container {
  background: linear-gradient(135deg, #1a2980, #26d0ce);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  color: #333;
  overflow-x: hidden;
  position: relative;
}

.welcome-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
  z-index: 0;
}

.header {
  text-align: center;
  padding: 40px 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  animation: headerLine 3s infinite;
}

.header h1 {
  font-size: 2.8rem;
  margin-bottom: 15px;
  color: #1a2980;
  background: linear-gradient(90deg, #1a2980, #26d0ce);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.header p {
  font-size: 1.2rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.stat-item {
  background: rgba(255, 255, 255, 0.95);
  padding: 25px 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-item .number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a2980;
  margin-bottom: 5px;
  background: linear-gradient(90deg, #1a2980, #26d0ce);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-item .label {
  font-size: 1rem;
  color: #555;
  font-weight: 500;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
}

.feature-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #26d0ce, #1a2980);
}

.feature-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  color: white;
  font-size: 1.8rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.feature-card h3 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #1a2980;
}

.feature-card p {
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
  flex-grow: 1;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: linear-gradient(90deg, #1a2980, #26d0ce);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(26, 41, 128, 0.3);
  align-self: flex-start;
  margin-top: 10px;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(26, 41, 128, 0.4);
}

.btn i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.btn:hover i {
  transform: translateX(5px);
}

.ticket-preview {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
}

.ticket-preview h3 {
  font-size: 1.5rem;
  color: #1a2980;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.ticket {
  background: linear-gradient(135deg, #f6d365, #fda085);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ticket::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(40%, -40%);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  padding-bottom: 15px;
  font-size: 0.9rem;
}

.ticket-status {
  font-weight: 600;
  color: #4caf50;
}

.ticket-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}

.station {
  text-align: center;
}

.station .name {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.station .time {
  font-size: 1.1rem;
  opacity: 0.9;
}

.journey {
  text-align: center;
  padding: 0 20px;
}

.journey .train {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.journey .duration {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 5px;
}

.journey .route {
  font-size: 1.1rem;
  font-weight: 500;
}

.ticket-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.info {
  display: flex;
  flex-direction: column;
}

.info span {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.qr-code {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
}

@keyframes headerLine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 30px 20px;
  }

  .header h1 {
    font-size: 2.2rem;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .ticket-body {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .journey {
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>